<template>
    <div>
        <el-upload action="/api/file/upload" list-type="picture-card" :auto-upload="true" :on-success="submitUpload" >
            <i slot="default" class="el-icon-plus"/>
            <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                        <i class="el-icon-zoom-in"/>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >
                        <i class="el-icon-download"/>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" >
                        <i class="el-icon-delete"/>
                    </span>
                </span>
            </div>
        </el-upload>
    </div>
</template>

<script>
    export default {
        name: "upload",
        data(){
            return{
                photoURL:''
            }
        },
        methods:{
            handleClick(row) {
                console.log(row);
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            submitUpload(res) {
                this.$emit('transferToParents',res.data);
            },
        }
    }
</script>

<style scoped>

</style>
